<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-10-13 16:20:36
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-24 09:21:12
-->
<template>
  <div class="app-container">
    <div class="head">
      <div class="staff">人员列表</div>
      <div class="search-head">
        <el-input
          v-model="input"
          placeholder="请输入批次名称/考试名称"
          size="normal"
          clearable
          style="width: 260px"
        ></el-input>
        <div>
          <el-button type="primary" size="default" @click="search">
            搜索
          </el-button>
        </div>
      </div>
      <div class="newAdd">
        <el-button
          size="default"
          type="primary"
          @click="Add"
          style="margin-right: 10px"
          >+ 新增学员</el-button
        >
        <el-dropdown>
          <el-button class="el-icon-more"></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item> 导入 </el-dropdown-item>
            <el-dropdown-item> 导出 </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <el-table
      :data="staffList"
      style="width: 100%"
      :header-cell-style="{
        background: '#F5F8FA',
      }"
      @selection-change="handleSelectionChange"
    >
      <template slot="empty" class="emptyBg">
        <img src="@/assets/images/empty.jpg" alt="" />
      </template>
      <el-table-column type="selection" width="55"> </el-table-column>
      <template v-for="(item, index) in switchShow">
        <el-table-column
          :key="index"
          :label="item.label"
          :prop="item.stage"
          :width="item.width"
        >
        </el-table-column>
      </template>
    </el-table>
    <div class="footer">
      <div>
        <el-button
          size="default"
          @click="$router.push('/signUp')"
          style="color: #2b2b2b; border: 1px solid #d3dbeb"
        >
          返回
        </el-button>
        <el-button
          type="primary"
          size="default"
          @click="registration"
          :disabled="disabled"
        >
          下一步
        </el-button>
      </div>
      <!-- 分页器 -->
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        layout=" ->,total,sizes, prev, pager, next, jumper "
        :total="total"
      >
      </el-pagination>
    </div>
    <detail-sign
      :dialogObj="dialogObj"
      v-if="dialogObj.detailEject"
      :signUp="signUp"
    ></detail-sign>
    <new-student
      :dialog="dialogObj"
      ref="newStu"
      v-if="dialogObj.studentShowEject"
    ></new-student>
  </div>
</template>

<script>
import {
  getStuList,
  enrollField,
  getExamBatchById,
} from "@/api/IndividualUser/signUp";
import detailSign from "./detailSign.vue";
import NewStudent from "../traineeInfo/newStudent.vue";
export default {
  components: { detailSign, NewStudent },
  data() {
    return {
      // 控制表单的显示与隐藏
      switchShow: [
        {
          value: true,
          label: "姓名",
          stage: "name",
        },
        {
          value: true,
          label: "手机号",
          stage: "phoneNumber",
          width: "150px",
        },
        {
          value: true,
          label: "性别",
          stage: "sex",
        },
        {
          value: true,
          label: "公司",
          stage: "companyName",
          width: "180px",
        },
        {
          value: true,
          label: "部门",
          stage: "deptName",
        },
        {
          value: true,
          label: "身份证号",
          stage: "idNumber",
          width: "220px",
        },
        {
          value: true,
          label: "生日",
          stage: "birthday",
          width: "140px",
        },
        {
          value: true,
          label: "文化程度",
          stage: "education",
        },
        {
          value: true,
          label: "工作状态",
          stage: "jobState",
        },
      ],
      multipleSelection: [],
      signUp: [],
      dialogObj: {
        detailShow: false,
        detailEject: false,
        studentShow: false,
        studentShowEject: false,
      },
      pageSize: 10,
      pageNum: 1,
      options: [],
      total: 0,
      labelPosition: "top",
      staffShow: false,
      disabled: true,
      input: "",
      value: "",
      staffList: [],
      starffList: {},
      ExaInfo: {},
    };
  },
  watch: {
    input(newValue, oldValue) {
      if (newValue == "") {
        this.getList();
      }
    },
  },
  created() {
    this.ExaInfo = JSON.parse(sessionStorage.getItem("ExaInfo")) || {};
    this.getList();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    // 跳页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    search() {
      this.getList();
    },
    getList() {
      getStuList({
        identification: this.input,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }).then((res) => {
        res.rows.map((item) => {
          if (item.sex == 1) {
            item.sex = "女";
          } else if (item.sex == 2) {
            item.sex = "未知";
          } else if (item.sex == 0) {
            item.sex = "男";
          }
          if (item.jobState == 1) {
            item.jobState = "在职";
          } else if (item.jobState == 2) {
            item.jobState = "离职";
          }
          if (item.education == 1) {
            item.education = "小学";
          } else if (item.education == 2) {
            item.education = "初中";
          } else if (item.education == 3) {
            item.education = "高中/中专";
          } else if (item.education == 4) {
            item.education = "专科";
          } else if (item.education == 5) {
            item.education = "大学";
          } else if (item.education == 6) {
            item.education = "研究生";
          }
        });
        this.staffList = res.rows;
        this.total = res.total;
      });
    },
    onClose() {
      this.addForm = {
        ...newForm,
      };
    },
    Add() {
      this.dialogObj.studentShowEject = true;
      this.$nextTick(function () {
        this.dialogObj.studentShow = true;
      });
    },
    registration() {
      this.signUp = this.multipleSelection;
      let arr = [];
      this.signUp.forEach((item) => {
        arr.push(item.id);
      });
      let fd = new FormData();
      fd.append("examType", this.ExaInfo.id);
      fd.append("ids", JSON.stringify(arr));
      fd.append("batchId", this.ExaInfo.batchId);
      fd.append("check", "true");
      enrollField(fd).then((res) => {
        if (res.code !== 200) return;
        this.dialogObj.detailEject = true;
        this.$nextTick(function () {
          this.dialogObj.detailShow = true;
        });
      });

      // this.$router.push("/detailsign");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
      this.disabled = false;
      if (val.length == 0) {
        this.disabled = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.head {
  height: 56px;
  width: 100%;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  line-height: 56px;
  .staff {
    border-bottom: 3px solid #1267fa;
    height: 55px !important;
  }
  .search-head {
    display: flex;
  }
  .back {
    &::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      border-top: 3px solid #000;
      border-left: 3px solid #000;
      transform: rotate(-45deg);
    }
  }
}
.el-table {
  margin-top: 20px;
  border-bottom: 1px solid #eee;
}
.new-search {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

/deep/.el-dialog {
  margin-left: 450px;
}
// /deep/ .el-dialog__body {
//   padding-top: 0;
// }
/deep/ .el-divider--horizontal {
  margin-top: 0;
}
.vertical {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2b2b;
  line-height: 14px;
  padding-top: 20px;
}
.vertical::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 14px;
  margin-right: 10px;
  background-color: #1267fa;
}
/deep/ .el-form-item__content {
  margin-left: 0 !important;
  width: 330px;
}
.basics {
  display: flex;
  flex-wrap: wrap;
}
.el-form-item {
  margin-top: 17px;
  width: 330px;
  margin-right: 50px;
  margin-bottom: 0px;
}
.image {
  display: flex;
  flex-wrap: wrap;
}
.suggest {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
/deep/ .el-form-item__label {
  padding: 0;
}
.el-pagination {
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
// /deep/ .el-dialog__body {
//   padding-left: 60px;
// }
.el-form-item:nth-child(2n) {
  margin-left: 70px;
}
.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.sel-sence {
  margin-right: 10px;
}
.scenF {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  .scenF-content {
    display: flex;
    margin-left: 10px;
    margin-top: 10px;
    .scenF-detail {
      height: 36px;
      line-height: 36px;
      padding-left: 20px;
      padding-right: 20px;
      border: 1px solid #9aa1af;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      .el-icon-circle-close {
        transform: translateY(3px);
      }
    }
  }
}
</style>